{% extends 'base_main_goods.html' %}

{% block content %}
<div class="total_count" id="total_count"></div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
{% for goods in goods_all %}
	<ul class="cart_list_td clearfix" id="cart_list_td{{ forloop.counter0 }}">
		<li class="col01"><input type="checkbox" name="checked" {% if goods.3 %}checked{% endif %} id="checked{{ forloop.counter0 }}"></li>
		<li class="col02"><img src='/media/{{ goods.0.goods_front_image }}'></li>
		<li class="col03">{{ goods.0.name }}<br><em>{{ goods.0.shop_price }}元/500g</em></li>
		<li class="col04">500g</li>
		<li class="col05" > <span id="unit_price{{ forloop.counter0 }}">{{ goods.0.shop_price }}</span>元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;"  class="add fl">+</a>
				<input type="text" class="num_show fl" onkeyup='value=value.replace(/[^\d]/g,"")' value="{{ goods.1 }}" id="num{{ forloop.counter0 }}">
				<a href="javascript:;" class="minus fl">-</a>
			</div>
		</li>
		<li class="col07"><span class="unit_total_price" id="unit_total_price{{ forloop.counter0 }}">{{ goods.2 }}</span>元</li>
		<li class="col08"><a href="javascript:;" id="delete_{{ goods.0.id }}" class="delete_" tags="delete_{{ forloop.counter0 }}">删除</a></li>
	</ul>
{% endfor %}
        {% csrf_token %}
	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" id="checked"></li>
		<li class="col02">全选/全不选</li>
		<li class="col03" id="12334"></li>
		<li class="col04"><a href="{% url 'order:place_order' %}">去结算</a></li>
	</ul>

{% endblock %}

{% block sub_page_name_fl %}
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
{% endblock %}

{% block cart %}

{% endblock %}

{# ------------------------------------覆盖base_main_goods.html无用的框架------------------------------------------------#}
{% block navbar_con %}

{% endblock %}


{% block js %}
{{ block.super }}
<script>
$(function () {

    var csrf=$('input[name="csrfmiddlewaretoken"]').val();
    {#------------------$(function () {内容开始-------------------------------------------#}

    {#----------------------------------------------浏览器加载完执行的内容-----------------------------#}
    function func() {
        {# 全选框，选项都选中了，才能勾选，有一个选中，就不勾选 #}
        $.each($('input[name="checked"]'),function (i,item){
            $('.settlements>.col01>#checked').prop('checked',true);
            if( ! $(this).prop('checked')){
                $('.settlements>.col01>#checked').prop('checked',false);
                return false
            }
        });

    {#    页面上价格的显示函数    #}
    var total_price = 0;
    var sum = 0;
    {#  求商品数量的总和   #}
    $('.num_add>.num_show').each(function (i,item) {
        if($('#checked'+i).prop("checked")){
            sum += parseInt($(this).val())
        }
    });

    $('#total_count').html("全部商品<em>" + sum + "</em>件");
    {#  求所有商品价格和   #}
    $.each($('.cart_list_td>.col07>.unit_total_price'), function (i,item) {
        if($('#checked'+i).prop('checked')){

            total_price += parseInt($(this).text())
        }
    });
    $('.settlements>.col03').html("合计(不含运费)：<span>¥</span><em>" + total_price + "</em><br>共计<b>" + sum + "</b>件商品");

    }
    func();
    {#----------------------------------------------多选框里执行的内容-------------------------------------#}
    $.each($('input[name="checked"]'),function (i,item) {
        $(this).on('change',function () {
            total_count_is_delete(i,0,0,$(this).prop('checked'));
        });
    });
    {#----------------------------------------------全选执行的内容-------------------------------------#}

     $('.settlements>.col01>#checked').on('click',function () {
          $.each($('input[name="checked"]'),function (i,item) {
                $(this).prop('checked',$('.settlements>.col01>#checked').prop('checked'));
                $(this).trigger('change');
          });
     });

    {#----------------------------------------------点击+号执行的内容-------------------------------------#}


    $.each($('.add'), function (i, item) {
        {# $('.add')是多个这样的标签组成的伪数组，i是索引，从0开始，item伪数组里面的元素，也就是单个标签   #}
        $(this).on('click', function () {
           total_count_is_delete(i,1,0,$('#checked'+i).prop('checked'));
        });

    });
    {#----------------------------------------------点击-号执行的内容-------------------------------------#}


    $.each($('.minus'), function (i, item) {
        {# $('.add')是多个这样的标签组成的伪数组，i是索引，从0开始，item伪数组里面的元素，也就是单个标签   #}
        $(this).on('click', function () {
           total_count_is_delete(i,-1,0,$('#checked'+i).prop('checked'));
        });

    });

    {#    --------------------------------------点击输入框----------------------------------#}

    $.each($('.num_show'),function (i,item) {
        $(this).on('input propertychange',function () {
            total_count_is_delete(i,0,0,$('#checked'+i).prop('checked'));
        });

    });
    {#    --------------------------------------点击删除----------------------------------#}
    $.each($('.delete_'),function (i,item) {
        $(this).on('click',function () {
            total_count_is_delete(i,0,1,$('#checked'+i).prop('checked'));
        });

    });

    {#----------------------------------------------数量增减及删除的函数----------------------#}
    function  total_count_is_delete(i,signed,is_delete,is_select) {
            {#     从数量表单取出   #}
            var num=$('#num' + i).val();
            if(num=='' || num=='0'){
                $('#num' + i).val(1);
                num=1;
            }
            {# signed 增加为1,减去为-1，删除和输入框输入为0   #}
            num = parseInt(num) + parseInt(signed);
            if( num > 0){
                $('#num' + i).val(num);
                 var unit_total_price = num * parseInt($('#unit_price' + i).text());
                {# 单个商品的总价 #}
                $('#unit_total_price' + i).html(unit_total_price);
            var obj_id = $('a[tags="delete_'+i+'"]').attr('id');
            var goods_id = (obj_id).slice((obj_id).search(/(\d+)/),);
            $.ajax({
                url:'/carts/cart/',
                type:'POST',
                dataType:'json',
                data:{'num':num,'goods_id':goods_id,'is_delete':is_delete,'is_select':is_select},
                headers:{"X-CSRFToken":csrf},
                success:function (data) {
                    if(data.code == 200 && data.is_delete==1){
                        $('#cart_list_td' + i).remove();
                    }
                    func();
                },
                error:function () {
                    alert('请求失败！！！')
                }
            })
    }
}
{# ------------------------$(function () {内容结束---------------------   #}
})

</script>
{% endblock %}